<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Chat Records</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-date-editor {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <h1>Chat Records</h1>
            </el-header>

            <el-main>
                <!-- Search Form -->
                <el-form :model="queryParams" label-width="120px">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="Session ID">
                                <el-input v-model="queryParams.sessionId" placeholder="Session ID"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="Question">
                                <el-input v-model="queryParams.questionContent"
                                    placeholder="Question content"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="Answer">
                                <el-input v-model="queryParams.answerContent" placeholder="Answer content"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="Created By">
                                <el-input v-model="queryParams.createdBy" placeholder="Created by"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="Start Date">
                                <el-date-picker v-model="queryParams.startCreatedAt" type="datetime"
                                    placeholder="Select start date" format="yyyy-MM-dd HH:mm" value-format="timestamp"
                                    style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="End Date">
                                <el-date-picker v-model="queryParams.endCreatedAt" type="datetime"
                                    placeholder="Select end date" format="yyyy-MM-dd HH:mm" value-format="timestamp"
                                    style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item>
                        <el-button type="primary" @click="search">Search</el-button>
                        <el-button @click="reset">Reset</el-button>
                    </el-form-item>
                </el-form>

                <!-- Data Table -->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="sessionId" label="Session ID"></el-table-column>
                    <el-table-column prop="questionContent" label="Question"></el-table-column>
                    <el-table-column prop="answerContent" label="Answer"></el-table-column>
                    <el-table-column prop="createdBy" label="Created By"></el-table-column>
                    <el-table-column prop="createdAt" label="Created At"></el-table-column>
                </el-table>

                <!-- Pagination -->
                <el-pagination background layout="total, sizes, prev, pager, next" :total="total"
                    :page-size="queryParams.size" :current-page.sync="queryParams.page" @size-change="handleSizeChange"
                    @current-change="handlePageChange" :page-sizes="[5,10, 20, 50, 100]">
                </el-pagination>
            </el-main>
        </el-container>
    </div>

    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    total: 0,
                    queryParams: {
                        page: 1,
                        size: 10,
                        sessionId: null,
                        questionContent: null,
                        answerContent: null,
                        createdBy: null,
                        startCreatedAt: null,
                        endCreatedAt: null
                    }
                }
            },
            created() {
                this.fetchData()
            },
            methods: {
                fetchData() {
                    // Format dates as yyyyMMddHHmmss
                    const params = {
                        ...this.queryParams,
                        startCreatedAt: this.queryParams.startCreatedAt ?
                            this.formatDate(this.queryParams.startCreatedAt) : null,
                        endCreatedAt: this.queryParams.endCreatedAt ?
                            this.formatDate(this.queryParams.endCreatedAt) : null
                    };

                    axios.post('/chat-records/list', params)
                        .then(response => {
                            this.tableData = response.data.data
                            this.total = response.data.total
                            this.queryParams.page = response.data.page
                            this.queryParams.size = response.data.size
                        })
                        .catch(error => {
                            console.error(error)
                        })
                },
                formatDate(timestamp) {
                    const date = new Date(timestamp);
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    const hours = String(date.getHours()).padStart(2, '0');
                    const minutes = String(date.getMinutes()).padStart(2, '0');
                    const seconds = String(date.getSeconds()).padStart(2, '0');
                    return `${year}${month}${day}${hours}${minutes}${seconds}`;
                },
                search() {
                    this.queryParams.page = 1
                    this.fetchData()
                },
                reset() {
                    this.queryParams = {
                        page: 1,
                        size: 10,
                        sessionId: null,
                        questionContent: null,
                        answerContent: null,
                        createdBy: null,
                        startCreatedAt: null,
                        endCreatedAt: null
                    }
                    this.fetchData()
                },
                handleSizeChange(size) {
                    this.queryParams.size = size
                    this.queryParams.page = 1
                    this.fetchData()
                },
                handlePageChange(page) {
                    this.queryParams.page = page
                    this.fetchData()
                }
            }
        })
    </script>
</body>

</html>